<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'销售订单'}"></header-top>
		<!-- 搜索框 -->
		<view class="search_box mainpadding ffffff flexbetween">
			<view class="flexleft" @click="show = true">
				<text class="shaixuan">筛选</text>
				<view class="selecticon"></view>
			</view>
			<view class="search_input">
				<input type="text" placeholder="输入昵称或者手机号查询" v-model="key">
			</view>
			<view class="search_btn" @click="init">搜索</view>
		</view>
		
		<view class="flexcenter" v-if="!list.total">
			<view class="placeholderimg"></view>
		</view>
		<view class="mainpadding">
			<view class="strongtext ">共计{{list.total}}个,总金额{{total_price}}元</view>
			<!-- 某一个 -->
			<view class="right-content margin_top ffffff radius mainpadding" v-for="item in list.data"
				:key="item.id">
				<view class="flexbetween strongtext">
					<view class="">下单时间： {{item.createtime_text}}</view>
					<!-- <view class="rightjt"></view> -->
				</view>
				<view class="flexbetween margin_top">
					<text>公司名称：{{item.manystoreshop.name}}</text>
				</view>
				<view class="flexbetween margin_top">
					<view class="">姓名：{{item.manystoreshop.khname}}</view>
					<view class="">电话：{{item.manystoreshop.tel}}</view>
				</view>
				
				<view class="flexbetween">
					<text class="strongtext">{{item.name}}<text class="smalltext"
							v-show="item.gongsi">（{{item.gongsi}}）</text></text>
				</view>
				<view class="margin_top">
					<text>套餐：{{item.thali_name}}</text>
				</view>
				<!-- <view class="margin_top">
					<text>期限：365天</text>
				</view> -->
				<view class="margin_top">
					<text>价格：{{item.price}}</text>
				</view>
				<view class="flexbetween margin_top">
					<text>订单号：{{item.order_no}}</text>
				</view>
				
				<!-- <view class="margin_top">
					<view class="flexleft" @click="openlocation(item)">客户地址：{{item.dianpu}}{{item.address}}
						<view class="addressicon"></view>
					</view>
				</view>
				<view class="flexright margin_top" @click="phone(item.mobile)">
					电话：<view class="flexleft">{{item.mobile}}
						<view class="callphone"></view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<u-popup :show="show" @close="show=false" mode="bottom" :round="10">
			<view class="titletext flexcenter margin_top textcenter">筛选</view>
			<view class="mainpadding sxtext">
				<!-- <view class="flexleft margin_top">
					<view class="sxwidth margin_right">行业：</view>
					<view class="sxinput" @click="popshow(1)">
						<input type="text" placeholder="请选择行业" disabled="" v-model="hy.name">
					</view>
				</view> -->
				<view class="flexleft margin_top">
					<view style="margin-right: 40rpx;">时间段：</view>
					<view class="shijianbtn margin_right3" @click="zshow=true">{{startime}}</view>
					<view class="xian margin_right3"></view>
					<view class="shijianbtn" @click="yshowClick">{{endtime}}</view>
				</view>
				<u-datetime-picker :show="zshow" @confirm="zshowconfirm" v-model="value1" mode="date"
					@cancel="zshow= false"></u-datetime-picker>
				<u-datetime-picker :show="yshow" @confirm="yshowconfirm" v-model="value2" mode="date"
					@cancel="yshow= false" :minDate="minDate"></u-datetime-picker>
				<view class="flexleft margin_top">
					<view class="sxwidth margin_right">套餐：</view>
					<view class="sxinput" @click="popshow(2)">
						<input type="text" placeholder="请选择套餐" disabled="" v-model="tc.name">
					</view>
				</view>
				<view class="flexleft margin_top">
					<view class="sxwidth margin_right">关键字：</view>
					<view class="sxinput">
						<input type="text" placeholder="请输入关键字" v-model="keywords">
					</view>
				</view>
				<!-- <view class="flexleft margin_top">
					<view class="sxwidth margin_right">客户类型：</view>
					<view class="sxinput" @click="popshow(3)">
						<input type="text" placeholder="请选择客户类型" disabled="" v-model="khlx.name">
					</view>
				</view> -->
				<!-- <view class="flexleft margin_top">
					<view class="sxwidth margin_right">范围：</view>
					<view class="sxinput" @click="popshow(4)">
						<input type="text" placeholder="请选择范围" disabled="" v-model="fw.name">
					</view>
				</view> -->
				<view class="sxbtn" @click="close">确认</view>
			</view>
		</u-popup>
		<!-- 行业 -->
		<!-- <u-picker :show="hyshow" :columns="hycolumns" keyName="name" @confirm="hyconfirm" @cancel="hyshow=false">
		</u-picker> -->
		<!-- 套餐 -->
		<u-picker :show="tcshow" :columns="tccolumns" keyName="name" @confirm="tcconfirm" @cancel="tcshow=false">
		</u-picker>
		<!-- 客户类型 -->
		<!-- <u-picker :show="khlxshow" :columns="khlxcolumns" keyName="name" @confirm="khlxconfirm"
			@cancel="khlxshow=false"></u-picker> -->
		<!-- 范围 -->
		<!-- <u-picker :show="fwshow" :columns="fwcolumns" keyName="name" @confirm="fwconfirm" @cancel="fwshow=false">
		</u-picker> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				key: "",
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				pageShow:false,
				// 行业
				// hyshow: false,
				// hycolumns: [],
				// hy: {
				// 	name: "",
				// 	id: "",
				// },
				// 套餐
				tcshow: false,
				tccolumns: [],
				tc: {
					name: "",
					id: "",
				},
				zshow: false,
				yshow: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				startime: "开始时间",
				endtime: "结束时间",
				minDate: "",
				start_time: "",
				end_time: "",
				keywords:"",
				// 客户类型
				// khlxshow: false,
				// khlxcolumns: [],
				// khlx: {
				// 	name: "",
				// 	id: "",
				// },
				// 范围
				// fwshow: false,
				// fwcolumns: [],
				// fw: {
				// 	name: "",
				// 	id: "",
				// },
				total_price:0,
			}
		},
		onShow() {
			this.init()
			this.getsx()
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			}
		},
		methods: {
			init(isPage, page) {
				let _this = this
				httpRequest.request('/employeesapi/user/myThaliOrder', 'GET', {
					page: page || 1,
					limit: _this.limit,
					start_time: this.start_time,
					end_time: this.end_time,
					thali_id: this.thali_id, //套餐id
					keywords: this.keywords
				}, false, false, true).then(res => {
					if (res.code == 1) {
						// res.data.list.forEach(item => {
						// 	let address = item.dianpu.split("/")
						// 	item.dianpu = address.join("")
						// })
						let resList = res.data.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
							this.total_price = res.data.total_price
						}
						
						_this.pageShow=true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.lastpage <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// getsx() {
			// 	httpRequest.request('/appapi/staff/customers/category', 'POST', {}).then(res => {
			// 		this.hycolumns.push(res.data.hangye)
			// 		this.fwcolumns.push(res.data.fanwei)
			// 		this.tccolumns.push(res.data.taocan)
			// 		this.khlxcolumns.push(res.data.kehufenlei)
			// 	})
			// },
			getsx() {
				httpRequest.request('/employeesapi/index/getthali', 'GET', {}).then(res => {
					this.tccolumns.push(res.data)
				})
			},
			date(data) {
				let time = new Date(data);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				month = month < 10 ? '0' + month : month
				let day = time.getDate();
				day = day < 10 ? '0' + day : day
				return year + '-' + month + '-' + day
			},
			yshowClick() {
				if (!this.minDate) {
					httpRequest.toast("请先选择开始时间！");
					return false
				}
				this.yshow = true
			},
			zshowconfirm(e) { //开始时间
				this.zshow = false
				this.minDate = e.value
				this.startime = this.date(e.value)
				this.start_time = this.startime
			},
			yshowconfirm(e) { //结束时间
				this.yshow = false
				this.endtime = this.date(e.value)
				this.end_time = this.endtime
			},
			popshow(value) {
				this.show = false
				if (value == 1) {
					this.hyshow = true
				} else if (value == 2) {
					this.tcshow = true
				} else if (value == 3) {
					this.khlxshow = true
				} else if (value == 4) {
					this.fwshow = true
				}
			},
			// hyconfirm(e) {
			// 	this.hyshow = false
			// 	this.show = true
			// 	this.hy.name = e.value[0].name
			// 	this.hy.id = e.value[0].id
			// },
			tcconfirm(e) {//套餐
				console.log(e)
				this.tcshow = false
				this.show = true
				this.tc.name = e.value[0].name
				this.thali_id = e.value[0].id
			},
			// khlxconfirm(e) {
			// 	this.khlxshow = false
			// 	this.show = true
			// 	this.khlx.name = e.value[0].name
			// 	this.khlx.id = e.value[0].id
			// },
			// fwconfirm(e) {
			// 	this.fwshow = false
			// 	this.show = true
			// 	this.fw.name = e.value[0].name
			// 	this.fw.id = e.value[0].id
			// },
			clearList(){
				this.startime="开始时间"
				this.endtime="结束时间"
				this.tc.name=""
				this.keywords=""
			},
			close() {
				this.show = false
				this.init()
				this.clearList()
			},
			openlocation(item) {
				uni.openLocation({
					latitude: Number(item.lat), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.lng), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.gongsi, //即将传到高德或腾讯地图的店铺名称
					address: item.dianpu + item.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			// 打电话
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shijianbtn {
		padding: 20rpx 40rpx;
		background: #F7F9FA;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.xian {
		width: 22rpx;
		height: 0rpx;
		background-color: #999999;
		border: 1rpx solid #999999;
	}

	// 搜索
	.shaixuan {
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
		margin-right: 9rpx;
	}

	.search_input {
		// width: 85%;
		width: 70%;
		background-color: #F6F6F6;
		border-radius: 50rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.search_btn {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476fe;
	}

	// 内容
	.right-content {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.smalltext {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.content_top {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}

	.margin_right {
		margin-right: 10rpx;
	}

	// 筛选样式开始
	.sxbtn {
		width: 100%;
		margin-top: 50rpx;
		padding: 20rpx 0;
		background-color: #3476fe;
		border-radius: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}

	.sxtext {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.sxwidth {
		width: 250rpx;
	}

	.sxinput {
		width: 100%;

		input {
			width: 100%;
		}
	}

	// 结束
</style>